<!DOCTYPE html>
<html style="height: 100%;">

<head lang="en">
    <meta charset="UTF-8">
    <title>VRS</title>
    <link rel="stylesheet" type="text/css" href="css/Stylesheet.css">
    <script type="text/javascript" src="js/localstorage.js" ></script>
    <style type="text/css">
    	button {
	        padding: 3px 6px;
	        margin: 0px 3px;
	        background: #009bce;
	        border-radius: 4px;
	        border: 1px;
	        color: #fff;
	    }
	    .tel{display: none;}
    </style>
    <script type="text/javascript">
    	function login() {
    		var select = document.getElementById("select").value;
    		if(select == 1){
    			alert("login success");
    			location.href="首页.html";
    		}else if(select == 2){
    			alert("login success");
    			location.href="自助/Visitor.html";
    		}else if(select == 3){
    			alert("login success");
    			location.href="自助/Carrier.html";
    		}else if(select == 4){
    			alert("login success");
    			location.href="自助/Interviewee.html";
    		}
    	}
    	function select(a){
    		if(a == 1){
    			document.getElementsByClassName("tel")[0].style.display = "none";
    			document.getElementsByClassName("tel")[1].style.display = "none";
    			document.getElementsByClassName("use")[0].style.display = "block";
    		}else{
				document.getElementsByClassName("use")[0].style.display = "none";
    			document.getElementsByClassName("tel")[0].style.display = "block";
    			document.getElementsByClassName("tel")[1].style.display = "flex";
    		}
    	}
    </script>
</head>

<body>
	<!--<div style="position: fixed;right: 80px;bottom: 230px;">
		<figure style="text-align: center;">
			<img style="width:100px;" src="img/pad.png" />			
		</figure>
	</div>-->
	<div style="position: fixed;right: 30px;bottom: 50px;">
		<figure style="text-align: center;">
			<img style="width:100px;" src="img/pad.png" />		
			<!--<img style="width:100px;" src="img/down.png" />-->
			<p>Scan QR code to download APP<!-- 扫描二维码下载APP --></p>
		</figure>
	</div>
    <div class="loginwrapper" style="margin-top: 6%;">
    	<div id="loginLogo">
			<img src="img/TourTrax-Logo.png" alt="TourTrax.NET logo">
		</div>
		
		<div class="content" id="loginContainer">
			<div class="loginForm">
	            <label class="loginField">Login type:</label><br>
				<select id="select" style="width:210px;" class="loginInput" onchange="select(this[selectedIndex].value)">
					<option value="1">Staff/Admin</option>
					<!--<option value="2">Visitor</option>-->
					<option value="3">Contractor company</option>
					<option value="2">Guest</option>
					<option value="4">Host</option>
				</select>
			</div>

			<div class="loginForm use">
	            <label class="loginField">Username:</label><br>
				<input name="user" type="text" id="username" class="loginInput" style="width:210px;">
			</div>
			<div class="loginForm tel">
	            <label class="loginField">telephone:</label><br>
				<input name="user" type="text" id="telphone" class="loginInput" style="width:210px;">
			</div>
			<div class="loginForm tel" style="justify-content: flex-end;">
	            <button>Get dynamic verification code</button>
			</div>

			<div class="loginForm">
				<label class="passwordField">Password:</label><br>
			
            	<input name="pas" type="password" id="Password" class="loginInput" style="width:210px;">
			
			</div>

			<div class="loginForm" style="display: flex;justify-content: space-between;">
				<a href="sign_up.html">Sign up</a>
				<button onclick="login()">Login In</button>
			</div>
		</div>
    </div>
</body>
    
</html>